<title>徽章</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">徽章</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">徽章</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Secondary Pill Badges start-->
<section id="default-pill-badges">
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-pill</code> with <code>.badge-primary</code>class within element to create primary pill badge.</p>
						<div class="badge badge-pill badge-primary">43</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Secondary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-pill</code> with <code>.badge-secondary</code>class within element to create default pill badge.</p>
						<div class="badge badge-pill badge-secondary">59</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-pill</code> with <code>.badge-success</code>class within element to create success pill badge.</p>
						<div class="badge badge-pill badge-success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-danger</code>class within element to create danger pill badge.</p>
						<div class="badge badge-pill badge-danger">78</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Warning Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-warning</code>class within element to create warning pill badge.</p>
						<div class="badge badge-pill badge-warning">68</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Info Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-info</code>class within element to create info pill badge.</p>
						<div class="badge badge-pill badge-info">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Light Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-light</code>class within element to create light pill badge.</p>
						<div class="badge badge-pill badge-light">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dark Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-dark</code>class within element to create dark pill badge.</p>
						<div class="badge badge-pill badge-dark">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Custom Blue Grey Color Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.bg-pink</code>class within element to create pink label.</p>
						<div class="badge badge-pill bg-pink">63</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Secondary Pill Badges end -->

<!-- Pill Badges With Glow effect start-->
<section id="glow-effect-pill-badges">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pill Badges With Glow effect</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-primary">41</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Secondary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-secondary">59</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-danger">78</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Warning Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-warning">68</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Info Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-info">57</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pill Badges With Glow effect end -->

<!-- Pill Badges with Icons start-->
<section id="pill-badges-with-icons">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pill Badges with Icons</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Primary Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-pill badge-glow badge-primary">
							<i class="font-medium-4 icon-line-height ft-award"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Secondary Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-pill badge-secondary">
							<i class="font-medium-4 icon-line-height ft-activity"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Success Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-pill badge-glow badge-success">
						<i class="font-medium-4 icon-line-height ft-bookmark"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Square Danger Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-pill badge-danger badge-square">
						<i class="font-medium-4 icon-line-height ft-command"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Square Warning Icon Label</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-pill badge-glow badge-warning badge-square">
						<i class="font-medium-4 icon-line-height ft-droplet"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Square Info Icon pill badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="badge badge-pill badge-glow badge-info badge-square">
						<i class="font-medium-4 icon-line-height ft-film"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pill Badges with Icons end -->

<!-- Bordered Pill Badges start-->
<section id="bordered-pill-badges">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Bordered Pill Badges</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-border</code> with <code>.badge-primary</code>class within element to create primary pill badge.</p>
						<div class="badge badge-pill badge-border border-primary primary">43</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-border</code> with <code>.badge-success</code>class within element to create success pill badge.</p>
						<div class="badge badge-pill badge-border border-success success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-danger</code>class within element to create danger pill badge.</p>
						<div class="badge badge-pill badge-border border-danger danger">78</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bordered Pill Badges end -->
</div>

<script type="text/javascript">
	
</script>